<template>

	<view class="content">

		<view class="content-top">
			<view class="content-title">
				<text>产品退料</text>
			</view>
			<hr>
			<u-form :model="formData" ref="formData" style="margin-top: 24rpx;" :rules="rules">
				<u-row gutter="100">

					<u-col span="5">
						<u-form-item :border-bottom="false" label="生产订单:" label-width='150rpx' prop="workorderCode">
							<u-input v-model="formData.workorderCode" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="发布工单:" label-width='150rpx' prop="releaseOrderCode">
							<u-input v-model="formData.releaseOrderCode" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="产品牌号:" prop="productName" label-width='150rpx'>
							<u-input :disabled="true" v-model="formData.productName" placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="生产批号:" prop="batchCode" label-width='150rpx'>
							<u-input :disabled="true" v-model="formData.batchCode" placeholder="" />
						</u-form-item>
					</u-col>

					<u-col span="5">
						<u-form-item :border-bottom="false" label="当前产线:" label-width='150rpx' prop="worklineName">
							<u-input v-model="formData.worklineName" disabled placeholder="" />
						</u-form-item>
					</u-col>

					<u-col span="5">
						<u-form-item label="退料时间" prop="salseDate" :border-bottom="true" label-width='150rpx'>
							<u-input v-model="formData.salseDate" disabled disabledColor="#ffffff"
								placeholder=""></u-input>

						</u-form-item>
					</u-col>

				</u-row>
			</u-form>

		</view>
		<view class="content-bottom">
			<view class="tab-content" :style="data_index === 'params'? 'height:90%' : 'height:80%'  ">
				<view class="tabs">

					<view v-for="(item, index) in data_tabList"
						:class="['tabs-item', item.key === data_index ? 'active' : '']" :key="index"
						@click="data_index = item.key">
						{{ item.value }}
					</view>
				</view>

				<!-- 选择产品 -->
				<view class="tab-list" v-show="data_index === 'product'">
					<u-button @click="addproduct" type="primary" size="medium">新增
					</u-button>

					<u-table style="width:100%;height: 100%;margin-top: 20px;">
						<u-tr>

							<u-th>产品牌号</u-th>
							<u-th>生产批次</u-th>
							<u-th>包装</u-th>
							<u-th>标签</u-th>

							<u-th>退料数量</u-th>
							<u-th>操作</u-th>
						</u-tr>
						<u-tr v-for="(item,index) in proWorkorderFeedProductList" :key="index">
							<u-td style="height: auto;!important">{{ item.productName }}</u-td>
							<u-td style="height: auto;!important">{{ item.batchCode }}</u-td>
							<u-td style="height: auto;!important">{{ item.pack }}</u-td>
							<u-td style="height: auto;!important">{{ item.label }}</u-td>

							<u-td style="height: auto;!important;text-align: center;">
								<u-input v-model.number="item.quantitySalse" type="number" placeholder="请输入"
									@input="sumChange" />
							</u-td>

							<u-td style="height: auto;!important">
								<u-button type="warning" size="mini" style="width:120rpx;margin: 10rpx;"
									@click="deleteproduct(item)" plain>删除</u-button>
							</u-td>
						</u-tr>

					</u-table>
				</view>
			</view>
			<view class="tab-list1">
				<u-form :model="form1" ref="uForm">
					<u-form-item :border-bottom="false">
						<view style="display: flex; margin: 0 auto;">
							<u-button @click="submit" type="primary" size="medium"><u-icon
									name="arrow-upward"></u-icon>提交
							</u-button>
							<view style="width:20px">

							</view>
							<u-button @click="cancel" type="primary" size="medium"><u-icon name="close"></u-icon>取消
							</u-button>

						</view>
					</u-form-item>
				</u-form>
			</view>
			<u-toast ref="uToast" />
			<u-mask class="loadingBox" :show="uLoading" @click="uLoading = false" :mask-click-able="false">
				<u-loading class="uLoading" mode="circle" :show="uLoading" size="100"></u-loading>
			</u-mask>
		</view>
		<!-- 选择库存原料-->
		<u-popup v-model="showwmStockSelect" mode="center" width="60%" height="80%" border-radius="10" @close="close">
			<wmStockSelect @close-popup="showwmStockSelect=false" @selectValue="selectValueItem"></wmStockSelect>
		</u-popup>
		<!-- 选择产品库存 -->
		<u-popup v-model="showproductSelect" mode="center" width="80%" height="80%" border-radius="10" @close="close">
			<wmProductSelect @close-popup="showproductSelect=false" @selectValue="selectValueProduct"></wmProductSelect>
		</u-popup>
	</view>
</template>

<script>
	import wmStockSelect from './wmStockSelect.vue'
	import wmProductSelect from './wmProductSelect.vue'
	export default {
		components: {
			wmStockSelect,
			wmProductSelect
		},
		props: {
			workorder: null
		},
		data() {
			return {
				uLoading: false,
				type: 'textarea',
				border: true,
				height: 50,
				autoHeight: true,
				show: false,
				border: true,
				form1: {},
				value: '',
				data_index: "product",
				formData: {

				},
				data_list: [],
				loading: false,
				// tab栏
				data_tabList: [{
					value: "产品选择",
					key: "product",
				}, ],
				statusList: [],
				gznTabs: [],
				gznWrap: [],
				showWrap: false,
				showTabs: false,
				// 报工历史数据
				proWorkorderFeedItemList: [],
				rules: {
					'pack': {
						type: 'string',
						required: true,
						message: '请选择包装',
						trigger: ['blur', 'change']
					},
					'label': {
						type: 'string',

						required: true,
						message: '请选择标签',
						trigger: ['blur', 'change']
					},
					'quantityFeedback': {
						type: 'number',

						required: true,
						message: '请填写报工数量',
						trigger: ['blur', 'change']
					},

					// 'defectiveProductQuantity': {
					// 	type: 'number',
					// 	required: true,
					// 	message: '请填写不合格品数量',
					// 	trigger: ['blur', 'change']
					// },
					'defectiveProductRecoverNumber': {
						type: 'number',

						required: true,
						message: '请填写不良品数量',
						trigger: ['blur', 'change']
					},
					'recyclingScrap': {
						type: 'number',

						required: true,
						message: '请填写洗机料数量',
						trigger: ['blur', 'change']
					},
					'crushedMaterialQuantity': {
						type: 'number',

						required: true,
						message: '请填写待回收料数量',
						trigger: ['blur', 'change']
					},
				},
				// 选择原料
				showwmStockSelect: false,
				// 产品列表
				proWorkorderFeedProductList: [],
				// 产品弹框
				showproductSelect: false
			};
		},



		created() {


			// this.formData = this.workorder;
			this.formData.workorderCode = this.workorder.workorderCode
			this.formData.releaseOrderCode = this.workorder.releaseOrderCode
			this.formData.workorderId = this.workorder.workorderId
			this.formData.releaseOrderId = this.workorder.releaseOrderId
			this.formData.productName = this.workorder.productName
			this.formData.batchCode = this.workorder.batchCode
			this.formData.worklineName = this.workorder.worklineName

			this.formData.salseDate = this.getCurrentDateTime()
		},

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.formData.setRules(this.rules)
		},
		methods: {

			// 获取当前日期
			getCurrentDateTime() {
				const now = new Date();

				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需要加 1
				const day = String(now.getDate()).padStart(2, "0");

				const hours = String(now.getHours()).padStart(2, "0");
				const minutes = String(now.getMinutes()).padStart(2, "0");
				const seconds = String(now.getSeconds()).padStart(2, "0");

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 取消提交
			cancel() {
				this.formData = {};
				this.proWorkorderFeedItemList = [];
				this.proWorkorderFeedProductList = [];
				this.$emit("close-popup"); // 触发父组件的关闭事件
			},
			// 包装选择
			wrapConfirm(arr) {

				this.formData.pack = arr[0].value
			},
			// 标签选择
			tabsConfirm(arr) {

				this.formData.label = arr[0].value
			},
			submit() {
				let isOk = this.proWorkorderFeedProductList.every(item => item.quantitySalse && item.quantitySalse != '');


				if (isOk) {
					this.uLoading = true
					this.$u.api.getAutoCode('PRODUCTRECPT_CODE').then(res => {
						this.$u.api.addAndExecuteRecepu({
							salseCode: res,
							workorderId: this.formData.workorderId,
							releaseOrderId: this.formData.releaseOrderId,

							salseDate: this.formData.salseDate,
							wmProductSalseLineList: this.proWorkorderFeedProductList,

						}).then(res => {
							this.uLoading = false
							this.$refs.uToast.show({
								title: '操作成功',
								type: 'success',
							})
							setTimeout(() => {
								this.cancel()
								this.$refs.formData.resetFields()

							}, 1000)
						})
					})

				} else {

					return uni.showToast({
						title: '请检查子项的数量是否填写',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}



			},
			valChange(value) {
				console.log('valChange', value)
			},

			// 获取当前日期的方法
			getProjectNum() {
				const projectTime = new Date(); // 当前中国标准时间
				const Year = projectTime.getFullYear(); // 获取当前年份 支持IE和火狐浏览器.
				const Month = projectTime.getMonth() + 1; // 获取中国区月份
				const Day = projectTime.getDate(); // 获取几号
				const hour = projectTime.getHours();
				const minute = projectTime.getMinutes();
				const second = projectTime.getSeconds();
				var CurrentDate = String(Year);
				if (Month >= 10) {
					// 判断月份和几号是否大于10或者小于10
					CurrentDate = CurrentDate + "-" + Month + "-";
				} else {
					CurrentDate = CurrentDate + "-" + "0" + Month + "-";
				}
				if (Day >= 10) {
					CurrentDate += Day + " ";
				} else {
					CurrentDate += "0" + Day + " ";
				}
				if (hour >= 10) {
					CurrentDate += hour + ":";
				} else {
					CurrentDate += "0" + hour + ":";
				}
				if (minute >= 10) {
					CurrentDate += minute + ":";
				} else {
					CurrentDate += "0" + minute + ":";
				}
				if (second >= 10) {
					CurrentDate += second;
				} else {
					CurrentDate += "0" + second;
				}
				return CurrentDate;
			},

			// 选择新增物料
			addItem() {
				this.showwmStockSelect = true;
			},
			close() {

				this.showwmStockSelect = false;
				this.showproductSelect = false;
			},
			// 选择的生产原料
			selectValueItem(value) {

				this.proWorkorderFeedItemList.push(value);

			},
			// 删除物料
			deleteItem(item) {

				let arr = this.proWorkorderFeedItemList.filter(value => value.itemId != item.itemId);
				this.proWorkorderFeedItemList = arr;

			},
			// 新增产品
			addproduct() {
				this.showproductSelect = true;
			},
			// 删除产品
			deleteproduct(item) {

				let arr = this.proWorkorderFeedProductList.filter(value => value.productId != item.productId);
				this.proWorkorderFeedItemList = arr;
			},
			// 选择的产品
			selectValueProduct(value) {

				this.proWorkorderFeedProductList.push(...value);

			},
			// 求领料和
			sumChange() {

				let sum1 = this.proWorkorderFeedItemList.reduce((prev, item) => {
					prev += item.quantity * 1;
					return prev;
				}, 0)
				let sum2 = this.proWorkorderFeedProductList.reduce((prev, item) => {
					prev += item.quantity * 1;
					return prev;
				}, 0)
				this.formData.quantity = (sum1 + sum2) * 1

			}

		},
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.content-title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 600;
			margin: 10px;
		}

		.content-top {
			padding: 20rpx;
			height: 10%;
			width: 100%;
		}

		.content-bottom {
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-top: 20rpx;
			padding: 30rpx;
		}

		.tab-content {
			width: 100%;
			position: relative;

			.tabs {
				display: flex;
				position: relative;
				color: rgb(70, 71, 72);
				border-bottom: 2rpx solid rgb(193, 193, 193);

				.tabs-item {
					margin-right: 80rpx;
					cursor: pointer;
					font-size: 32rpx;

					&.active {
						color: #2979ff;
						z-index: 9;

						&::after {
							content: "";
							bottom: -4rpx;
							left: 0;
							right: 0;
							height: 4rpx;
							background: #2979ff;
						}
					}
				}
			}

			.tab-list {
				// display: flex;
				// align-items: center;
				width: 100%;
				margin: 20rpx 0;
			}
		}
	}
</style>